
<!DOCTYPE html />
<html>
<head>
    <title>drag image</title>
</head>
<body>
    <div style="width: 100%; height: 100%; position:relative;">
        <!-- <div id="tag" style="left:0px; top:100px; width: 200px; height: 100px; position:relative; border: 1px solid #666;"></div> -->
        <div id="tag" style="background-color: #ddd;border: 1px;width: 500px;height: 500px;position:relative;top:100px;left: 0;"></div>
        <img id="src" src="images/allaboutyou.png" draggable="true" style="left:0px; top:0px; width: 50px; height: 50px; position:absolute;border-radius: 50%;background-color: red;" >
    </div>
</body>
</html>
<script type="text/javascript">
 
        var img = document.getElementById('src');
        var div = document.getElementById('tag');
        var x = 0, y = 0,
            w = parseInt(div.style.width, 10),
            h = parseInt(div.style.height, 10),
            l = parseInt(div.style.left, 10),
            t = parseInt(div.style.top, 10),
           ol = parseInt(img.style.left, 10),
           ot = parseInt(img.style.top, 10);
        img.addEventListener("dragstart", function (e) {
            x = e.pageX;
            y = e.pageY;
        }, false);
        div.addEventListener("dragenter", function (e) {
            e.preventDefault();
        }, false);
        div.addEventListener("dragover", function (e) {
            e.preventDefault();
        }, false);
        div.addEventListener("drop", function(e) {
            e.preventDefault();
            var nl = e.pageX - x + ol,
                nt = e.pageY - y + ot;
            if ((nt > t && nl > l) && (nt < (t + h) && nl < (l + w))) {
                var n = img.cloneNode();
                n.style.top = (nt - t) + 'px';
                n.style.left = (nl - l) + 'px';
                div.innerHTML += n.outerHTML;
            }
        }, false);
</script>